<template>
    <div class="mainBody">
        <div class="top-header">
            <dv-decoration-8 :reverse="true" style="width:25%;height:40px;" />
            <dv-decoration-5 class="header-center-decoration" :dur="10" />
            <dv-decoration-8 style="width:25%;height:40px;" />
            <div class="center-title">潍坊市再担保集团业务数据看板</div>
        </div>
        <div class="grid_layout">
            <div class="grid_layout_item">
                <div class="grid_left mt20">
                    <dv-border-box-12>
                        <div class="highlight_title">Top5银行业务</div>
                        <el-tabs v-model="activeNameTop" @tab-click="handleClickTop">
                            <el-tab-pane label="当月新增" name="1"></el-tab-pane>
                            <el-tab-pane label="本年新增" name="2"></el-tab-pane>
                            <el-tab-pane label="在保规模" name="3"></el-tab-pane>
                        </el-tabs>
                        <div
                            id="echart_topLeft"
                        ></div>
                    </dv-border-box-12>
                </div>
                <div>
                    <dv-border-box-12>
                        <div class="highlight_title">各担保机构业务</div>
                        <el-tabs v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane label="当月新增" name="first"></el-tab-pane>
                            <el-tab-pane label="本年新增" name="second"></el-tab-pane>
                            <el-tab-pane label="在保规模" name="third"></el-tab-pane>
                        </el-tabs>
                        <div
                            id="echart_bottomLeft"
                        ></div>
                    </dv-border-box-12>
                </div>
            </div>
            <div class="grid_center">
                <el-row class="grid_btn">
                    <el-form ref="form" :model="form" :inline="true" size="medium" label-width="80px">
                        <el-col :span="12">
                            <el-form-item label="选择年">
                                <el-select v-model="form.yearData" placeholder="选择年">
                                    <el-option
                                        v-for="item in yearOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="选择月">
                                <el-select v-model="form.monthData" placeholder="选择月">
                                    <el-option
                                        v-for="item in monthOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                     </el-form>
                </el-row>

                <div id="map-echart" ref="mapEchart" class="map"></div>
                <img src="../assets/images/img1.png" id="img1" style="display: none;" />
                <img src="../assets/images/img2.png" id="img2" style="display: none;" />
                <img src="../assets/images/img3.png" id="img3" style="display: none;" />
                <img src="../assets/images/img4.png" id="img4" style="display: none;" />
                <img src="../assets/images/img5.png" id="img5" style="display: none;" />
                <img src="../assets/images/img6.png" id="img6" style="display: none;" />
                <img src="../assets/images/img7.png" id="img7" style="display: none;" />
                <img src="../assets/images/img8.png" id="img8" style="display: none;" />
                <img src="../assets/images/img9.png" id="img9" style="display: none;" />
                <img src="../assets/images/img10.png" id="img10" style="display: none;" />
                <img src="../assets/images/img11.png" id="img11" style="display: none;" />
                <img src="../assets/images/img12.png" id="img12" style="display: none;" />


                <div class="dataContFoot">
                    <dv-border-box-8>
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <div class="dataContItem">
                                    <span><b>{{ topNumber.currMonthCT }}</b>笔</span>
                                    <p>当月批量业务</p>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="dataContItem">
                                    <span><b>{{ topNumber.currMonthPL }}</b>笔</span>
                                    <p>当月传统业务</p>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="dataContItem">
                                    <span><b>{{ topNumber.currYearCT }}</b>笔</span>
                                    <p>当年批量业务</p>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="dataContItem">
                                    <span><b>{{ topNumber.currYearPL }}</b>笔</span>
                                    <p>当年传统业务</p>
                                </div>
                            </el-col>
                        </el-row>
                    </dv-border-box-8>
                </div>

            </div>
            <div class="grid_layout_item">
                <div class="mt20">
                    <dv-border-box-12>
                        <div class="highlight_title mt20">最新线上业务审批明细</div>
                        <dv-scroll-board
                            :config="config"
                            class="scrollBoardBox"
                            ref="scrollBoard"
                        />
                    </dv-border-box-12>
                </div>
                <div>
                    <dv-border-box-12>
                        <div class="highlight_title mt20">
                            当月线上业务审批数量
                        </div>
                        <div class="monthBox">
                            <dv-scroll-ranking-board :config="monthConfig" class="boardBox"/>
                        </div>
                    </dv-border-box-12>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import geoJson from '@/assets/echarts/weifang.json'
echarts.registerMap('china', geoJson)
export default {
    name: "dataIndex",
    data() {
        return {
            activeNameTop:'1',
            activeName:'first',
            form:{
                yearData:'',
                monthData:''
            },
            yearOptions:[{
                value: '2020',
                label: '2020'
            },{
                value: '2021',
                label: '2021'
            },{
                value: '2022',
                label: '2022'
            },{
                value: '2023',
                label: '2023'
            }],
            monthOptions:[{
                value: '1月',
                label: '1月'
            },{
                value: '2月',
                label: '2月'
            },{
                value: '3月',
                label: '3月'
            },{
                value: '4月',
                label: '4月'
            },{
                value: '5月',
                label: '5月'
            },{
                value: '6月',
                label: '6月'
            },{
                value: '7月',
                label: '7月'
            },{
                value: '8月',
                label: '8月'
            },{
                value: '9月',
                label: '9月'
            },{
                value: '10月',
                label: '10月'
            },{
                value: '11月',
                label: '11月'
            },{
                value: '12月',
                label: '12月'
            }],
            config: {
                header: ['时间', '被担保人','金额','业务经理'],
                data: [
                    ["行1列1", "行1列22","333","444"],
                    ["行1列1", "行1列2324354234532","333","444"],
                    ["行1列1", "行1列2","333","444"],
                    ["行1列1", "行1列2","333","444"],
                    ["行1列1", "行1列2","333","444"],
                    ["行1列1", "行1列2","333","444"],
                    ["行1列1", "行1列22","333","444"],
                    ["行1列1", "行1列2","333","444"],
                    ["行1列1", "行1列2","333","444"],
                    ["行1列1", "行1列22","333","444"],
                    ["行1列1", "行1列2","333","444"],
                ],
                oddRowBGC: "#243965",
                evenRowBGC: "#161F4D",
                //columnWidth: [80],
                align: ["center"],
                rowNum: 8,
            },
            monthConfig:{
                data: [
                    {
                    name: '周口',
                    value: 55
                    },
                    {
                    name: '南阳',
                    value: 120
                    },
                    {
                    name: '西峡',
                    value: 78
                    },
                    {
                    name: '驻马店',
                    value: 66
                    }
                ]
            },
            mapDataList:[{
                name: '奎文区', 
                value: 396,
                itemStyle: {
					normal: {
						color: {
							image: document.getElementById("img1"),
							repeat: 'repeat'
						}
					}
				}
            },{
                name: '潍城区', 
                value: 66,
                itemStyle: {
					normal: {
						color: {
							image: document.getElementById("img2"),
							repeat: 'repeat'
						}
					}
				}
            },{
                name: '寒亭区', 
                value: 222,
                itemStyle: {
					normal: {
						color: {
							image: document.getElementById("img3"),
							repeat: 'repeat'
						}
					}
				}
            },{
                name: '坊子区', 
                value: 688,
                itemStyle: {
					normal: {
						color: {
							image: document.getElementById("img4"),
							repeat: 'repeat'
						}
					}
				}
            },{
                name: '昌乐县',
                value: 75,
                itemStyle: {
					normal: {
						color: {
							image: document.getElementById("img5"),
							repeat: 'repeat'
						}
					}
				}
            },{
                name: '临朐县', 
                value: 121,
                itemStyle: {
					normal: {
						color: {
							image: document.getElementById("img6"),
							repeat: 'repeat'
						}
					}
				}
            },{
                name: '青州市', 
                value: 91,itemStyle: {
					normal: {
						color: {
							image: document.getElementById("img7"),
							repeat: 'repeat'
						}
					}
				}
            },{
                name: '诸城市', 
                value: 479,
                itemStyle: {
					normal: {
						color: {
							image: document.getElementById("img8"),
							repeat: 'repeat'
						}
					}
				}
            },{
                name: '寿光市', 
                value: 34,
                itemStyle: {
                    normal: {
                        color: {
                                image: document.getElementById("img9"),
                                repeat: 'repeat'
                            }
                        }
				}
            },{
                name: '安丘市', 
                value: 631,
                itemStyle: {
					normal: {
						color: {
							image: document.getElementById("img10"),
							repeat: 'repeat'
						}
					}
				}
            },{
                name: '高密市', 
                value: 1203,
                itemStyle: {
					normal: {
						color: {
							image: document.getElementById("img11"),
							repeat: 'repeat'
						}
					}
				}
            },{
                name: '昌邑市', 
                value: 988,
                itemStyle: {
					normal: {
						color: {
							image: document.getElementById("img12"),
							repeat: 'repeat'
						}
					}
				}
            }],
            mapChart: null,
            toolTipTimers: null,
            index: 0,
            topNumber:{
                currMonthCT:'99',
                currMonthPL:'999',
                currYearCT:'88',
                currYearPL:'66',
            }
            
        };
    },
    created(){
        setInterval(function(){
            // let activeCurrent = this.activeNameTop;
            // console.log('00',activeCurrent);
            // let _this=this;
            // if(activeCurrent == '1'){
            //     _this.activeNameTop = '2'
            // }else if(activeCurrent== '2'){
            //     _this.activeNameTop = '3'
            // }else{
            //     _this.activeNameTop = '1'
            // }
            // console.log('00==',_this.activeNameTop);
        },1000)
        this.getNowTime();
    },
    methods: {
        getNowTime() {
            var now = new Date();
            var year = now.getFullYear(); //得到年份
            var month = now.getMonth(); //得到月份
            month = month + 1;
            this.form.yearData = year;
            this.form.monthData = month + '月';  
        },
        echartTopLeft() {
            let chartDom = document.getElementById("echart_topLeft");
            let myChart = echarts.init(chartDom);
            let option;
            const colors = ["#D4B23D", "#3892FA", "#fff"];
            option = {
                color: colors,
                grid: {
                    right: "7%",
                    top: "6%",
                    left: "12%",
                    bottom: "12%",
                },
                xAxis: [
                    {
                        type: "category",
                        axisTick: {
                            alignWithLabel: true,
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff",
                            },
                        },
                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "",
                        position: "left",
                        alignTicks: true,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: colors[2],
                            },
                        },
                        axisLabel: {
                            formatter: "{value}",
                        },
                    },
                ],
                series: [
                    {
                        name: "",
                        type: "bar",
                        data: [176, 150,176, 150,176, 150,176],
                    },
                ],
            };
            option && myChart.setOption(option);
            // 大小自适应
            window.addEventListener('resize', function() {
                myChart && myChart.resize();
            });
        },
        
        echartBottomLeft() {
            let chartDom = document.getElementById("echart_bottomLeft");
            let myChart = echarts.init(chartDom);
            let option;
            option = {
                tooltip: {
                    trigger: "item",
                },
                color: [
                    "#5A6FC5",
                    "#A2C879",
                    "#F4C866",
                    "#E16D66",
                    "#81BCD5",
                    "#53A16B",
                    "#F38854",
                    "#965EAA",
                ],
                legend: {
                    top: "5%",
                    left: "left",
                    orient: "vertical",
                    textStyle: {
                        color: "#fff",
                    },
                },
                series: [
                    {
                        type: "pie",
                        top: "20%",
                        left: "20%",
                        radius: ["40%", "60%"],
                        avoidLabelOverlap: false,
                        label: {
                            formatter: "{d}%",
                        },
                        emphasis: {
                            label: {
                                //中不文字提示
                                show: true,
                                fontSize: 40,
                                fontWeight: "bold",
                            },
                        },
                        labelLine: {
                            show: true,
                        },
                        data: [
                            { name: "临朐县",value: 199},
                            { name: "寿光市",value: 499},
                            { name: "昌邑市",value: 99},
                            { name: "诸城市",value: 299},
                        ],
                    },
                ],
            };
            option && myChart.setOption(option);
            // 大小自适应
            window.addEventListener('resize', function() {
                myChart && myChart.resize();
            });
        },
        handleClickTop(tab, event){//Top5银行业务
            this.echartTopLeft();
            console.log(tab.name, event);
        },
        handleClick(){//各担保机构业务
            this.echartBottomLeft()
        },
        // 地图
        mapEchart() {
            this.mapChart = echarts.init(document.getElementById('map-echart'));
            echarts.registerMap('weifang', geoJson); 
            var option = {
                //不触发事件
				silent:true,
				//要显示纹理要关闭这个属性
				visualMap: {
					show: false
				},
                 // 进行相关配置
                tooltip: {
                    // 鼠标移到图里面的浮动提示框
                    position: 'top',
                    backgroundColor: 'rgba(0,0,0,.8)',//提示框背景色
                    borderColor: 'rgba(0,0,0,0.3)',//边框夜色
                    textStyle: {
                        color: 'rgba(255, 255, 255, 1)'//文字颜色
                    },
                    //自定义提示框自动调用函数
                    formatter: function (params) {
                        return (
                        `
                            <div style='width:100%;height:60px'>
                                <p style="font-size:14px;line-height:30px;font-weight:bold" >${params.name}</p>
                                <p style="font-size:14px;line-height:30px" >再担保：${params.value}</p>
                        </div>
                        `
                        );
                    }
                },
                title: {
                    text: '',
                    x: "center",
                },
                //公共的一些设置  容器
				geo: {
					map: 'weifang',
					aspectScale: 1,
					roam: true,
                    zoom: 1.2,
                    label: {
                        normal: {
                            show: true, //省份名展示
                            fontSize: "10",
                            color: "#fff",
                        },
                        emphasis: {
                            show: true, //省份名展示
                            fontSize: "10",
                            color: "#fff",
                        },
                    },
					itemStyle: {
						//容器外边框设置
						normal: {
							borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#215bc8'
							}, {
								offset: 1,
								color: '#53D9FF'
							}], false),
							borderWidth: 1, //设置外层边框
							shadowColor: '#0953c2',
							shadowOffsetY: 6,
                            shadowOffsetX: 2,
							shadowBlur:5
						},
						//选中状态
						emphasis: {
							areaColor: "#59D5F5",
                            shadowBlur: 3,
                            borderWidth: 1,
                            shadowOffsetX: 2,
                            shadowOffsetY: 2,
                            shadowColor: "#59D5F5",
                            opacity: 0.8,
						}
					}
				},
                series: [{
                    name:'潍坊市',
                    type: 'map',
                    mapType:'weifang',
                    coordinateSystem: 'geo',
                    geoIndex:0,
                    animationDuration: 1200,
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    label: {
                        // 显示地图省名称
                        normal: {
                            color: "#389dff",
                            formatter: "{b}",
                            position: [-12, -1],
                            show: true,
                        },
                        emphasis: {
                            show: true,
                            color: "#fff",
                        },
                    },
                    itemStyle: {
                        normal: {
                            areaColor: "#0d0059",
                            borderColor: "#389dff",
                            borderWidth: 0.5,
                        },
                        emphasis: {
                            areaColor: '#59D5F5',
                            shadowOffsetX: 8,
                            shadowOffsetY: 8,
                            shadowBlur: 5,
                            borderWidth:0,
                            shadowColor: "#0074BC",
                        },
                    },
                    data: this.mapDataList
                }],
                
            };
            this.mapChart.setOption(option);
            // 大小自适应
            window.addEventListener('resize', function() {
                this.mapChart && this.mapChart.resize();
            });
             // 鼠标移入的时候 取消高亮 并且取消定时器
            this.mapChart.on("mouseover", () => {
                this.mapChart.dispatchAction({
                type: "downplay",
                seriesIndex: 0,
                dataIndex: this.index == 0 ? this.mapDataList.length - 1 : this.index - 1, // 取消高亮
                });
                clearInterval(this.toolTipTimers);
            });
            
            //鼠标移出继续轮播高亮
            this.mapChart.on("mouseout", () => {
                this.setTimer();
            });
            this.$nextTick(() => {
                this.setTimer()
            })
            
        },

        setTimer() {
            clearInterval(this.toolTipTimers);
            let index = this.index;
            this.toolTipTimers = setInterval(() => {
                // downplay取消上一个
                this.mapChart.dispatchAction({
                    type: "downplay",
                    seriesIndex: 0,
                    dataIndex: index == 0 ? this.mapDataList.length - 1 : index - 1, // 取消高亮
                });
                // highlight高亮下一个
                this.mapChart.dispatchAction({
                    type: "highlight",
                    seriesIndex: 0,
                    dataIndex: index, // 第几高亮
                });
                //showTip展示相应提示框
                this.mapChart.dispatchAction({
                    type: "showTip", // 提示框
                    seriesIndex: 0,
                    name: this.mapDataList[index]?.name, // 第几高亮
                });
                //如果是最后一个了就从头开始
                if (index == this.mapDataList.length - 1) index = 0;
                    else index++;
                    this.index = index;
            }, 3000);
        },

    },
    mounted() {
        this.echartTopLeft();
        this.echartBottomLeft();
        this.mapEchart();
    },
    beforeDestroy() {
        if (this.toolTipTimers) {
            clearInterval(this.toolTipTimers); // 在Vue实例销毁前，清除我们的定时器
        }

    },
};
</script>

<style scoped lang="scss">
.mainBody {
    background-color: #030745;
    width:100%;
    height: 100vh;
    background: url(../assets/images/bg.png) repeat-y;
    background-attachment: fixed;
    background-size: 100% 100%;
    overflow: auto;
}
.top-header {
    height: 60px;
    display: flex;
    justify-content: space-between;
    position: relative;
    .header-center-decoration{
        width: 50%;
        height: 60px;
        margin-top:25px;
    }
    .center-title{
        position: absolute;
        font-size: 22px;
        font-weight: 700;
        left: 50%;
        top: 12px;
        letter-spacing:.2em;
        color: #fff;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }
}
.dv-border-box-12 {
    padding: 10px;
    box-sizing: border-box;
}
.grid_layout {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: space-between;
    padding: 25px 10px;
    box-sizing:border-box;
    > .grid_layout_item {
        width:27%;
        .highlight_title {
            color: #7e94ba;
            position: relative;
            padding-left: 13px;
            margin: 5px 0;
            margin-left: 4%;
            &::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 7px;
                height: 100%;
                background-color: #72fafd;
                border-radius: 5px;
            }
        }
    }
    > .grid_center {
        width:46%;
        margin:10px 20px 0;
       
    }
}
.mt20{
    margin-bottom: 20px !important;
}
.monthBox{
    widows: 100%;
    padding: 10px;
    box-sizing: border-box;
}
.dataContFoot{
    width: 100%;
    margin-top:40px;
}
.dataContItem{
    width: 100%;
    text-align: center;
    padding: 30px 0;
}
.dataContFoot span{
    display: block;
    font-size: 15px;
    color: #fff;
    margin-bottom:10px;
    b{
        font-size: 20px;
        color: #f9b92d;
        font-weight: bold;
        margin-right: 4px;
    }
}
.dataContFoot P{
    color: #ddd;
    text-align: center;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
}
.grid_btn {
    &::v-deep {
        .el-select {
            // 1.修改边距
            margin-left: 9px;
            .el-input.el-input--suffix {
                // 2.修改背景颜色、字体颜色、边框、宽高
                .el-input__inner {
                    background: rgba(0, 119, 239, 0.4) !important;
                    color: #fff;
                    border: 1px solid #057DD9;
                    width: 100%; 
                }
            }
                // 符号的位置会错乱，进行修正（垂直）
            .el-select__caret.el-input__icon.el-icon-arrow-up {
              line-height: 30px;
            }
            
        }
        .el-form-item__label{
            color: #fff !important;
        }

    }
}
.grid_layout_item{
    &::v-deep {
        .el-tabs__nav-wrap::after {
            display: none !important;
        }
        .grid_layout_item .el-tabs__item:hover{
            color:#fff !important;
        }
        .el-tabs__item{
            color:#eee !important;
        }
        .grid_layout_item .el-tabs__item.is-active{
            color:#fff !important;
        }
       
    }
}
#echart_topLeft{
    width: 100%;
    height:340px;
}
#echart_bottomLeft{
    width: 100%;
    height: 340px;
}
.map{
    width: 100%;
    height:710px;
}
.boardBox{
    width: 100%;
    height: 400px;
}
.scrollBoardBox{
    width: 100%;
    height: 360px;
}
@media (max-width:1600px) {
    #echart_topLeft{
    width: 100%;
    height:270px;
    }
    #echart_bottomLeft{
        width: 100%;
        height: 270px;
    }
    .map{
        width: 100%;
        height:560px;
    }
    .scrollBoardBox{
        width: 100%;
        height: 390px;
    }
    .boardBox{
        width: 100%;
        height: 220px;
    }
}
@media (max-width:1460px) {
    #echart_topLeft{
        width: 100%;
        height:200px;
    }
    #echart_bottomLeft{
        width: 100%;
        height: 200px;
    }
    .map{
        width: 100%;
        height:410px;
    }
    .scrollBoardBox{
        width: 100%;
        height: 260px;
    }
    .boardBox{
        width: 100%;
        height: 214px;
    }
}
</style>
